﻿@page "/chart/dashed-line"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample shows the rate of fruit production from 2005 to 2011 with default line series and dash array in the chart. Dashed lines are animated by using CSS animation. </p>
</SampleDescription>
<ActionDescription>
    <p>
        In this example, you can see how to render and configure the line type charts. Line type charts are used to represent time-dependent data, showing trends in data at equal intervals. You can use
        <code>DashArray</code>, <code>Width</code>, <code>Fill</code> properties to customize the line. <code>Marker</code> are used to represent individual data and its value.
    </p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the dashed line can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/line/#customization'>documentation section</a>.</p>
</ActionDescription>

<style>
    #control-container {
        padding: 0px !important;
    }

    #container_Series_1,
    #container_Series_0 {
        stroke-dasharray: 10px 10px;
        stroke-linejoin: round;
        stroke-linecap: round;
        -webkit-animation: dash 1s linear infinite;
        animation: dash 1s linear infinite;
    }

    #container_Series_0_Point_3_Symbol {
        -webkit-animation: opac 1s ease-out infinite;
        animation: opac 1s ease-out infinite;
    }

    @@-webkit-keyframes dash {
        100% {
            stroke-dashoffset: -20px;
        }
    }

    @@keyframes dash {
        100% {
            stroke-dashoffset: -20px;
        }
    }

    @@keyframes opac {
        0% {
            stroke-opacity: 1;
            stroke-width: 0px;
        }

        100% {
            stroke-opacity: 0;
            stroke-width: 10px;
        }
    }
</style>

<div class="control-section">
    <SfChart ID="container" Title="Fruits Production Statistics" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="yyyy" IntervalType="IntervalType.Years" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis LabelFormat="{value}%" RangePadding="ChartRangePadding.None" Minimum="0" Maximum="40" Interval="10">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
        <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical">
        </ChartCrosshairSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartData" Name="Banana" XName="Period" Width="2"
                         Opacity="1" YName="Banana_ProductionRate" Type="ChartSeriesType.Line" DashArray="5">
                <ChartMarker Visible="true" Width="10" Height="10">
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@ChartData" Name="Apple" XName="Period" Width="2"
                         Opacity="1" YName="Apple_ProductionRate" Type="ChartSeriesType.Line" DashArray="10">
                <ChartMarker Visible="true" Width="10" Height="10" Shape="ChartShape.Diamond">
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<LineChartData> ChartData = new List<LineChartData>
    {
        new LineChartData { Period = new DateTime(2005, 01, 01), Banana_ProductionRate = 12, Apple_ProductionRate = 9.5 },
        new LineChartData { Period = new DateTime(2006, 01, 01), Banana_ProductionRate = 10.6, Apple_ProductionRate = 19.9 },
        new LineChartData { Period = new DateTime(2007, 01, 01), Banana_ProductionRate = 15.6, Apple_ProductionRate = 25.2 },
        new LineChartData { Period = new DateTime(2008, 01, 01), Banana_ProductionRate = 38.6, Apple_ProductionRate = 36 },
        new LineChartData { Period = new DateTime(2009, 01, 01), Banana_ProductionRate = 27.4, Apple_ProductionRate = 16.6 },
        new LineChartData { Period = new DateTime(2010, 01, 01), Banana_ProductionRate = 23.5, Apple_ProductionRate = 14.2 },
        new LineChartData { Period = new DateTime(2011, 01, 01), Banana_ProductionRate = 16.6, Apple_ProductionRate = 10.3 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class LineChartData
    {
        public DateTime Period { get; set; }
        public double Banana_ProductionRate { get; set; }
        public double Apple_ProductionRate { get; set; }
    }
}
